<template>
  <!--<div class="village_detail" v-if="flag">
    <head-top goBack="true" head-title="详情"></head-top>
    <div class="top-title">
      <div class="title border-bottom">{{detail.title}}</div>
      <div class="desc">
        <span class="author">作者：{{detail.author}}</span>&nbsp;
        <span class="amount">浏览量：{{detail.reading_amount}}</span>&nbsp;
        <span class="time">{{detail.created_at*1000 |dateFmt(('YYYY-MM-DD'))}}</span>
      </div>
      &lt;!&ndash;<mt-button type="primary" @click="downLoad(detail.id)">下载</mt-button>&ndash;&gt;
      <mt-button v-if="detail.file_url!=='' && androidPdf && detail.file_url" type="primary" @click="goPDF">查看文件</mt-button>
      <mt-button v-if="detail.file_url!=='' && iosPDf && detail.file_url" type="primary" @click="goIosPDF(detail.file_url)">查看文件</mt-button>
    </div>
    <p v-html="detail.content" ref="box" class="content"></p>

    &lt;!&ndash;pdf显示&ndash;&gt;
    <div v-if="pdfShow" style="position: absolute;top: 40px;left: 0;z-index: 2;width: 100%;overflow: auto;-webkit-overflow-scrolling:touch;">
      <span style="position: fixed;color: white;font-size: 15px;padding: 20px" @click="closePDF">关闭弹窗</span>
      &lt;!&ndash;<iframe src="https://abc.wykbw.com/cspdf.pdf" style=" overflow: scroll;-webkit-overflow-scrolling: touch;width: 1px; min-width: 100%; *width: 100%;" width="100%" height="680" scrolling="no" frameborder="0"></iframe>&ndash;&gt;
      <iframe :src="detail.file_url" style=" overflow: scroll;-webkit-overflow-scrolling: touch;width: 1px; min-width: 100%; *width: 100%;" width="100%" height="680" scrolling="no" frameborder="0"></iframe>
    </div>
  </div>-->
  <div class="work_detail">
    <head-top goBack="true" head-title="详情"></head-top>
    <div class="annex_box">
      <div class="title">{{detail.title}}</div>
      <div class="time">发布时间：{{detail.time}}</div>
      <div class="content_box">
        <div class="text">
          <p v-html="detail.content" ref="box" class="content"></p>
        </div>
      </div>
      <!-- 附件展示 -->
      <div class="see_annex" v-if="detail.files">
        <div class="annex_title">附件：</div>
        <div class="annex_li" v-for="(item,index) in detail.files" :key="index" @click="openAnnex(index,item.url,item.type)">
          <span>{{item.name}}</span>
          <span>点击查看</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .work_detail{
    padding: 40px 10px 10px 10px;
    .annex_box{
      width: 100%;
      .title{
        text-align: center;
        color: #292929;
        font-size: 18px;
        font-weight: 700;
        padding: 10px;
      }
      .time{
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #999999;
      }
      .content_box,.see_annex{
        margin-top: 5%;
        box-shadow: 1px 1px 4px #E9E9E9;
        border-radius: 10px;
        font-size: 15px;
        .text{
          padding: 10px;
          color: #333333;
          line-height: 25px;
        }
        .annex_title{
          border-bottom: 1px solid #F3F3F3;
          padding: 10px;
          color: #3780C8;
          background: #EEF6FF;
        }
        .annex_li{
          padding: 10px;
          color: #666666;
          width: 94%;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          border: 1px dashed #F3F3F3;
          text:last-child{
            color: #397CBD;
          }
        }
        .annex_li:last-child{
          border-bottom: none;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import wx from 'weixin-js-sdk'
  import { IsWeiXin } from '../../common/js/isWeiXin'
  import {getNewVoteDetail} from '../../api/MyIdent'
  import {Toast} from 'mint-ui'

  export default {
    name: 'NewVoteDetail',
    data () {
      return {
        detail: {},
        img: [],
        flag: false,
        text: '',
        pdfShow: false, // 控制PDF是否显示
        iosPDf: false, // iOS显示PDF方式
        androidPdf: false, // 安卓显示PDF
        newold: '' // 判断新老版本
      }
    },
    created () {
      this.whetherIos() // 判断是安卓还是iOS
      console.log(this.$route.query)
      this._getNewVoteDetail()
      // 获取富文本里p标签里面的img标签
      setTimeout(() => {
        if (document.getElementsByClassName('content')[0]) {
          let imgbox = document.getElementsByClassName('content')[0].getElementsByTagName('img')
          // console.log(imgbox)
          var _this = this
          for (let i = 0; i < imgbox.length; i++) {
            this.img.push(imgbox[i].src)
            // 判断是否是微信浏览器而实现不同的图片预览
            // console.log(this.img)
            if (IsWeiXin()) {
              imgbox[i].addEventListener('click', function () {
                // console.log(imgbox[i].src)
                wx.previewImage({
                  current: imgbox[i].src, // 当前显示图片的http链接
                  urls: _this.img // 需要预览的图片http链接列表
                })
              })
            } else {
              // 如果图片是异步生成，在图片数据更新后调用
              this.$previewRefresh()
              imgbox[i].setAttribute('preview', 1)
            }
          }
        }
      }, 1000)
    },
    methods: {
      whetherIos() {
        const u = navigator.userAgent
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isiOS) {
          this.iosPDf = true
          this.androidPdf = false
        } else {
          this.iosPDf = false
          this.androidPdf = true
        }
      },
      // 新版公告详情
      _getNewVoteDetail() {
        getNewVoteDetail(this.$route.query.id).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.detail = res.data
            this.flag = true
          }
        })
      },
      // 点击查看附件
      openAnnex(index, url, type) {
        if (type === 1) {
          const arr = []
          arr.push(url)
          // console.log(arr)
          wx.previewImage({
            current: arr[index],
            urls: arr
          })
        } else {
          console.log(url)
          Toast({
            message: url,
            position: 'bottom',
            duration: 5000
          })
          window.open(url)
          // wx.downloadFile({
          //   url: url,
          //   success(res) {
          //     console.log(res)
          //     var filePath = res.tempFilePath
          //     console.log(filePath)
          //     wx.openDocument({
          //       filePath: filePath,
          //       // fileType:"pdf",
          //       success(res) {
          //         console.log('成功' + res)
          //       },
          //       fail(res) {
          //         console.log('失败' + res)
          //       }
          //     })
          //   }
          // })
        }
      },
      // 查看PDF事件（IOS）
      goIosPDF (url) {
        window.open(url)
      },
      // 查看PDF事件(安卓)
      goPDF() {
        this.pdfShow = true
      },
      // 关闭PDF
      closePDF() {
        this.pdfShow = false
      }
    },
    computed: {
    },
    components: {
      headTop
    }
  }
</script>
